<template>
  <div>
    <h1>使用css变量实现批量样式修改</h1>
    <button @click="isDark++">切换样式</button>
    <p class="content" :class="pTheme">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, placeat
      sapiente, laudantium, laboriosam natus expedita ipsum voluptate facere
      impedit quaerat dolorem consequatur saepe. Veniam corporis alias quasi
      temporibus eveniet odit!
    </p>
    <p class="footer" :class="pTheme">XXXX</p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const isDark = ref(0);
const themes = ["light", "hot", "dark"];
const pTheme = computed(() => themes[isDark.value % themes.length]);
const hotBgColor = "pink";
</script>

<style scoped>
.hot {
  --bg-color: v-bind(hotBgColor);
  --color: red;
  --border: 3px solid orange;
}
.dark {
  --bg-color: gray;
  --color: white;
  --border: 3px solid black;
}
.light {
  --bg-color: white;
  --color: black;
  --border: 3px solid pink;
}
.content {
  background-color: var(--bg-color, initial);
  color: var(--color, initial);
  border: var(--border, initial);
  padding: 10px;
}
.footer {
  background-color: var(--bg-color, initial);
  color: var(--color, initial);
}
</style>
